<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

</head>
<script>
    $(function () {
        var regionId;
        //查询攻略推荐 只查询一条,攻略推荐设置为值显示一条
        $.get("/travels/commends", {type: 3, pageSize: 1}, function (data) {
            //将查询到的攻略推荐信息渲染到页面响应位置
            $(".commend").renderValues(data, {
                //给getHref 指定一个函数
                'getHref': function (item, value) {
                    //item 绑定 render-key render-fun=getHref 的标签
                    //获取绑定render-key render-fun=getHref 的标签上的date-url
                    var url = $(item).data("url");
                    //对标签的href进行拼接加工 成新的连接
                    $(item).attr("href", url + value);
                }
            });
            //显示.commend下的第一个标签
            $(".commend:first").addClass("active");
        });
        //发送请求,查询所有 为推荐的地区
        $.get('/regions', {state: 1}, function (data) {
            var temp = "";
            var content = '';
            //遍历所有地区信息
            $.each(data, function (index, ele) {
                //使用拼接的方式将每条地区的信息用li 和 a标签进行封存 跳转使用携带信息 通过id 找到要跳转的目标
                temp += '<li class="nav-item"><a class="nav-link" data-rid="' + ele.id + '" data-toggle="pill" href="#pills-' + ele.id + '">' + ele.name + '</a></li>';
                '</li>';
                //将地区的id拼接到div中, 作为 上面 a标签的页面跳转寻找的目标 通过id
                content += "<div class='tab-pane fade' id='pills-" + ele.id + "'></div>";
            });
            //将拼接后的元素 放到对应使用的位置上
            $("#pills-tab").append(temp);
            $("#pills-tabContent").append(content);
            //给标签页绑定点击事件
            $(".nav-link[data-rid]").click(function () {
                //分页参数为全局参数  每次点击标签页分类 重置分页参数
                currentPage = 2;
                pages = 2;
                //获得当前被点击地区标签链接上绑定的地区id
                regionId = $(this).data("rid");
                //发送请求获取当前地区下所有推荐的攻略
                $.get('/regions/' + regionId + '/strategies', function (data) {
                    //将获取的freemarker HTML类型视图输出拼接到其指定标签内
                    $("#pills-" + regionId).html(data);
                }, "html");
            });
        });
        //查询出所有推荐攻略  并填充到推荐标签页 的当季推荐中
        $.get('/strategies', {pageSize: 0, state: 1}, function (data) {
            $(".strategyCommend").renderValues({list: data.list}, {
                //回调函数,前面的 渲染已经完成
                getHref: function (item, value) {//item render-key render-fun 所在的标签
                    //value 就是key 获取的值
                    var url = $(item).data("url");
                    $(item).attr("href", url + value);
                }
            });
        });
        //当前页
        var currentPage = 2;
        //总页数  用来判断是否是最后一页
        var pages = 2;
        //变量表示 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
        var loading = false;//查询状态
        //获取我的游记数据
        function query() {
            //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
            if (loading) {
                return;
            }
            //每次在发送ajax前,将查询状态改为正在查询
            loading = true;
            //从第二页开始 根据地区分页查询攻略 ,并将每一页的数据填充到克隆的模板中
            //因为从第二页开始 需要在PageHelper 中设置此请求禁用合理化分页,避免只有一页时查询出来第一页的数据
            $.get('/regions/' + regionId + '/strategies', {currentPage: currentPage}, function (data) {
                $.each(data.list, function (index, ele) {
                    //克隆模板
                    var div = $("#template .mb").clone(true);
                    //填充数据
                    $(div).find('a').attr('href', "strategyCatalogs.html?id=" + ele.id);
                    $(div).find('img').attr('src', ele.coverUrl);
                    $(div).find('span').html(ele.title);
                    //将填充了数据的克隆的div  append到指定位置
                    $(".classify").append(div);
                });
                //当前页加1 下次将查询第二页数据
                currentPage++;
                //总页数
                pages = data.pages;
                //查询请求结果,则将查询状态改为 不在查询中
                loading = false;
            }, "json");
        }

        //给window绑定滚动事件,当window滚动式,调用其中的函数
        $(window).scroll(function () {
            //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
            if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                if (currentPage <= pages) {
                    //判断有地区id的滚动才会查询数据  推荐页 滚动没有地区id则不查询
                    if (regionId) {
                        query();
                        //滚动到底部时,如果此时还有页数 弹出加载中信息
                        $(document).dialog({
                            type: 'notice',
                            infoText: '加载中',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }

                } else {
                    //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                    $(document).dialog({
                        type: 'notice',
                        infoText: '亲,已经到底了',
                        autoClose: 1500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        });

        //攻略页面搜索功能
        $("#searchBtn").click(function () {
            var keyword = $("#search").val();
            if (keyword != null && keyword != "") {
                location.href = "/searchPage.html?keyword=" + keyword + "&type=1";
            } else {
                $(document).dialog({
                    titleText: '温馨提示',
                    content: '搜索内容不能为空!',
                });
            }
        })
    });
</script>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-1">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-9">
            <div class="input-group-sm search">
                <input id="search" class="form-control" placeholder="找攻略">
            </div>
        </div>
        <div class="col-1">
            <i class="fa fa-search" id="searchBtn"
               style="color:white;font-size:25px;position: absolute;top: 23%;left: 10%">
            </i>
        </div>
    </div>
</div>
<!--全部攻略第二页及以后使用的模板,隐藏  用于克隆使用-->
<div id="template" style="display: none">
    <div class="col-6 mb">
        <a>
            <img class="float-left ">
            <div class="classify-text">
                <span></span>
                <p>0人收藏</p>
            </div>
        </a>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active show" data-toggle="pill" href="#pills-top">
            <span style="font-weight: bold;">推荐</span>
        </a>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-top">
        <div class="container commend">
            <div render-loop="list">
                <a render-key="list.travelId" render-fun="getHref" data-url="/travelContent.html?id=">
                    <img render-src="list.commendCoverUrl">
                    <p render-html="list.commendTitle"></p>
                </a>
            </div>

        </div>
        <hr>
        <div class="container strategyCommend">
            <h6>当季推荐</h6>
            <div class="row hot" render-loop="list">
                <div class="col-4">
                    <a data-url="strategyCatalogs.html?id=" render-key="list.id" render-fun="getHref">
                        <img render-src="list.coverUrl">
                        <p render-html="list.title"></p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="tab-pane fade" id="pills-1">
        <div class="container">
            <h6>当季推荐</h6>
            <div class="row hot">
                <div class="col ">
                    <a href="../strategyCatalogs.html?id=1">
                        <img src="/upload/30841451-5fd7-49b8-bcdb-54bccf0bb505.jpeg">
                        <p>0次浏览</p>
                    </a>
                </div>
                <div class="col ">
                    <a href="../strategyCatalogs.html?id=2">
                        <img src="/upload/e5e8a1a7-b127-4145-9fd0-a94e29f752ba.jpeg">
                        <p>0次浏览</p>
                    </a>
                </div>
                <div class="col ">
                    <a href="../strategyCatalogs.html?id=3">
                        <img src="/upload/7c91a3bc-b235-49c3-935a-67e5b1952eba.jpeg">
                        <p>0次浏览</p>
                    </a>
                </div>
            </div>
        </div>
        <hr>
        <div class="container">
            <h6>全部攻略</h6>
            <div class="row classify ">
                <div class="col-6 mb">
                    <a href="../strategyCatalogs.html?id=1">
                        <img class="float-left " src="/upload/30841451-5fd7-49b8-bcdb-54bccf0bb505.jpeg">
                        <div class="classify-text">
                            <span>成都</span>
                            <p>0人收藏</p>
                        </div>
                    </a>
                </div>
                <div class="col-6 mb">
                    <a href="../strategyCatalogs.html?id=2">
                        <img class="float-left " src="/upload/e5e8a1a7-b127-4145-9fd0-a94e29f752ba.jpeg">
                        <div class="classify-text">
                            <span>广州</span>
                            <p>0人收藏</p>
                        </div>
                    </a>
                </div>
                <div class="col-6 mb">
                    <a href="../strategyCatalogs.html?id=3">
                        <img class="float-left " src="/upload/7c91a3bc-b235-49c3-935a-67e5b1952eba.jpeg">
                        <div class="classify-text">
                            <span>北京</span>
                            <p>0人收藏</p>
                        </div>
                    </a>
                </div>
                <div class="col-6 mb">
                    <a href="../strategyCatalogs.html?id=4">
                        <img class="float-left " src="/upload/e170dc16-c976-4eae-8513-d01d144bed2b.jpeg">
                        <div class="classify-text">
                            <span>上海</span>
                            <p>0人收藏</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>-->
    <!--<div class="tab-pane fade" id="pills-2">
        <div class="container">
            <h6>当季推荐</h6>
            <div class="row hot">
                <div class="col ">
                    <a href="../strategyCatalogs.html?id=5">
                        <img src="/upload/530bb06c-47b9-4371-9699-705d78f17bd6.jpeg">
                        <p>0次浏览</p>
                    </a>
                </div>
                <div class="col ">
                    <a href="../strategyCatalogs.html?id=6">
                        <img src="/upload/c9eb542e-fcf8-4bff-8a73-d7a2f241b402.jpeg">
                        <p>0次浏览</p>
                    </a>
                </div>
            </div>
        </div>
        <hr>
        <div class="container">
            <h6>全部攻略</h6>
            <div class="row classify ">
                <div class="col-6 mb">
                    <a href="../strategyCatalogs.html?id=5">
                        <img class="float-left " src="/upload/530bb06c-47b9-4371-9699-705d78f17bd6.jpeg">
                        <div class="classify-text">
                            <span>巴黎</span>
                            <p>0人收藏</p>
                        </div>
                    </a>
                </div>
                <div class="col-6 mb">
                    <a href="../strategyCatalogs.html?id=6">
                        <img class="float-left " src="/upload/c9eb542e-fcf8-4bff-8a73-d7a2f241b402.jpeg">
                        <div class="classify-text">
                            <span>伦敦</span>
                            <p>0人收藏</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-3">
        <div class="container">
            <h6>当季推荐</h6>
            <div class="row hot">
            </div>
        </div>
        <hr>
        <div class="container">
            <h6>全部攻略</h6>
            <div class="row classify ">
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-12">
        <div class="container">
            <h6>当季推荐</h6>
            <div class="row hot">
            </div>
        </div>
        <hr>
        <div class="container">
            <h6>全部攻略</h6>
            <div class="row classify ">
            </div>
        </div>
    </div>-->
</div>
</body>

</html>